<script setup lang="ts">
import TestTsx from "@/components/TestTsx";

import { useUserStore } from "@/store/modules/user";
const userStore = useUserStore();

defineProps<{ msg: string }>();
const count = ref(0);
const handleClick = () => {
  console.log(123);
};

interface ITable {
  date: string;
  name: string;
  address: string;
}

const tableRowStyle = ({
  row,
  rowIndex,
}: {
  row: ITable;
  rowIndex: number;
}) => {
  if (rowIndex === 1) {
    return {
      background: "#465250",
    };
  } else if (rowIndex === 3) {
    return {
      background: "#8f8f91",
    };
  }
  return {};
};

const tableData: ITable[] = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<template>
  <div class="app-container">
    {{ userStore.name }}
    <h1>{{ msg }}</h1>

    <div class="card">
      <button type="button" @click="count++">count i s {{ count }}</button>

      <el-button @click="handleClick">
        <el-icon><icon-ep-circle-check-filled /></el-icon> Hello world
      </el-button>
      <el-icon><Folder /></el-icon>
      <div class="m-y-10">
        <IconEpCircleCheckFilled />
        <IconEpRefresh />
        <IconEpEdit />
        <IconEpApple />
      </div>
      <div class="mb-4">
        <el-button><icon-ep-check />Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success"><icon-ep-edit />Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
      </div>
      <p>
        Edit

        <code>components/HelloWorld.vue </code> to test HMR
      </p>
    </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :row-style="tableRowStyle"
    >
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>

    <TestTsx></TestTsx>
  </div>
</template>

<style scoped lang="scss"></style>
